<template>
  <div class="demo p10">
    <div>
      Edit CSS:
      <el-input v-model="css" rows="2" class="w-full mt10" type="textarea" />
    </div>
    <el-button type="primary" :disabled="isLoaded" @click="loadCss" class="mt10">
      加载
    </el-button>
    <el-button type="danger" :disabled="!isLoaded" @click="unload" class="mt10">
      卸载
    </el-button>
    <div class="usestyle-demo mt10">
      <p>ID: <code>{{ id }}</code></p>
      <p>Loaded: <code>{{ isLoaded }}</code></p>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useStyleTag } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    const { id, css, load, unload, isLoaded } = useStyleTag();

    function initState() {
      return {
        currCss: '.demo { background: #ad4c2e50; }.demo textarea { background: lightyellow; }',
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      css.value = state.currCss;
    });
    function loadCss() {
      load();
    }
    return {
      ...toRefs(state),
      id,
      css,
      load,
      unload,
      isLoaded,
      loadCss,
    };
  },
};
</script>
